Sử dụng Hero Image thế nào là tốt nhất ?

Bài viết được dịch lại từ Best Practices for Hero Images bởi Nick BaBich

Khi người dùng truy cập vào trang web của bạn, họ sẽ có một vài sự tương tác nhất định. Cho dù là có chủ ý hay ko, thì phần lớn được xác định bởi những gì họ nhìn thấy. Hero image (một kiểu phong cách thiết kế ảnh to, chiếm phần lớn diện tích ứng dụng, website) là một trong những cách nhanh nhất để tạo sự chú ý với người dùng bằng việc tận dụng một giác quan rất quan trọng của con người, đó là thị giác. Những hình ảnh lớn, hình họa, thiết kế có chủ ý sẽ giúp ích cho việc thu hút người dùng. Nó thu hút người dùng ngay lập tức và trở thành tâm điểm cho các ứng dụng nhỏ gọn hoặc các trang web.

Hero-image không chỉ là một bức ảnh đẹp, nó là một công cụ giao tiếp mạnh mẽ.

Trong bài viết này, tôi sẽ chỉ cho bạn một vài thủ thuật trong việc sử dụng hero-image.

Chỉ sử dụng hình ảnh có liên quan

Hãy kén chọn khi nói đến lựa chọn ảnh

Những bức ảnh có thể tạo nên hoặc phá hỏng trải nghiệm người dùng. Việc lựa chọn các bức ảnh phù hợp với chủ đề, mục đích, chiến lược của sự trải nghiệm là rất quan trọng. Lựa chọn bức ảnh không phù hợp sẽ khiến người dùng rời khỏi trang web của bạn với tốc độ nhanh như đạn.

Một ví dụ cho việc lựa chọn ảnh nghèo nàn
Chọn một bức phù hợp khiến cho họ muốn nán lại để xem thêm nhiều thông tin bạn cung cấp.


Một ví dụ cho việc lựa chọn ảnh chuẩn

Đưa bức ảnh trở thành tâm điểm

Hero image là nơi hoàn hảo để chứa một vài thông tin

Bạn muốn mọi thứ khác biệt và nổi bật. Hero-image sẽ khiến người dùng dừng lại và xem xét trang web của bạn mỗi lần họ truy cập.

Apple là một chuyên gia về việc sử dụng hero image
Thủ thuật: Điều này không có nghĩa là bức ảnh đó cần nói lên mọi thứ. Hơn nữa, những bức ảnh của bạn chỉ cần chia sẻ thông điệp thật có liên quan.

Chọn những ảnh có tính thuyết phục về mặt tình cảm

Đưa cảm xúc vào trong thiết kế

Những bức ảnh nên có một sự động chạm về mặt tình cảm, tạo cảm hứng và chia sẻ những suy nghĩ mà bạn đang cố gắng tạo ra. Sau tất cả, cảm xúc thường lấn át lý trí khi phải đưa ra những quyết định quan trọng.

Kích thích cảm xúc có thể xây dựng một sử gắn kết với người dùng.

Chỉ sử dụng hình ảnh HD

Những hình ảnh không nên xuất hiện tình trạng vỡ ảnh hoặc bị mờ

Không có gì tồi tệ hơn một bức ảnh to lớn mà lại có chất lượng thấp. Bức ảnh là mọi thứ nếu bạn muôn sử dụng kỹ thuật này. Chắc chắn ấn tượng đầu tiên của một người dùng là rất cần thiết. Hãy nhớ sử dụng ảnh chất lượng cao để đảm bảo điều này.

So sánh 2 bức ảnh có chât lượng khác nhau

Nhấn mạnh nút 'Call-to-action'

Khi bức ảnh chiếm lấy phần hiển thị trong thể loại thiết kế này, bạn vẫn cần thêm những thành phần thiết yếu như một nút 'call-to-action'. Màu sắc cũng rất quan trọng khi cần làm nổi bật nó. Luôn nhớ làm cho button call-to-action của bạn tỏa sáng ngay cả khi ban ngày.

Chiều cao của button nên hoạt đọng tốt với  hình ảnh quá khổ

Thiết kế tương phản

Thiết kế chữ dễ đọc bên trên hình ảnh

Lựa chọn font chữ đậm và dễ đọc, đồng thời hợp với những hình ảnh nhưng nổi bật so với chúng. Nếu bạn có kế hoạch sử dụng kiểu thiết kế chữ bên trên hình ảnh, chắc chắn rằng phần chính của bức ảnh cần được nhìn thấy và dễ hiểu khi đặt chữ vào. Có lẽ phương pháp đơn giản nhất để đặt chữ vào hình ảnh là overlay bức ảnh. Nếu bức ảnh gốc không đủ độ tối, bạn cần overlay tất cả bằng màu đen mờ.

Hoặc bạn có thể đưa đoạn chữ vào một khung scrim:

Scrim là một kĩ thuật thiết kế hình ảnh làm cho nó mờ hơn để có thể đọc được chữ.

Bạn có thể tìm hiểu thêm các kỹ thuật trong bài viết này: Design Considerations: Text on Images

Cân nhắc giữa các kích thước khác nhau

Đảm bảo hình ảnh của bạn hoạt động tốt với tất cả thiết bị

Đảm bảo những bức ảnh của bạn có kích thước phù hợp cho màn hình và trền nhiều nền tảng. Tối ưu hóa hình ảnh cho tất cả các thiết bị, thậm chí nếu phải thay đổi kích thước hoặc tráo đổi một hình ảnh lớn hơn với một hình ảnh nhỏ hơn cho thiết bị nhỏ hơn.

Thủ thuật: Sử dụng những công cụ mà cho phép bạn quản lý nhiều kích thước với bức ảnh của mình. Một trong số đó là Cloudinary, nó cho phép bạn tạo những bức ảnh có tính tương tác.

Cân nhắc sử dụng các hình ảnh minh họa

Những ảnh minh họa nhanh chóng trở thành một sự thay thế phổ biến cho cá nhân hơn là ảnh thông thường. Chúng cho phép bạn kiểm soát nhiều lựa chọn hình ảnh, cả về nội dung lẫn các chi tiết kỹ thuật.

Thủ thuật: Nếu bạn sử dụng ảnh minh họa cho thiết kế của mình, hãy chắc chắn là chúng phù hợp.

Kết luận

Những bức ảnh của bạn có chất lượng cả cao thì càng đáng để nhìn vào và hoạt động tốt với nội dung của bạn, thiết kế theo phong cách này là một lựa chọn hay. Thiết kế nút bấm call-to-action có sự tương phản và rõ ràng sẽ giúp kỹ thuật này đạt chuẩn hơn

Dịch bởi Hoang Vu